<template>
  <div class="try-project content-container">
    <div class="content">
      <div style="flex: 1">
        <label-value-row label="巡检项目" :value="info.checknums || 0" :size="20"></label-value-row>
        <div class="echarts">
          <div id="echarts-2-3"></div>
        </div>
        <div class="row" style="justify-content: center; font-size: 14px;">
          <circle-item color="#308AE7"></circle-item>
          <span style="margin-right: 10px;">巡检合格项</span>
          <span>{{ info.checkoks || 0 }}</span>
        </div>
      </div>
      <div class="remain">
        <div>
          <!-- <label-progress label="合同剩余预试次数" value="8" :total="20"></label-progress> -->
          <label-progress label="巡检到期天数" :value="info.checkdays || 0" :total="20" color="#5C5CFF"></label-progress>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>
        <div class="row">
          <div class="left">
            <img src="../../../../assets/index/icon-预试.png" alt class="small-icon" />
            <span>上次巡检日期</span>
          </div>
          <div>{{ info.checkper || '无' }}</div>
        </div>
        <div class="row">
          <div class="left">
            <img src="../../../../assets/index/icon-预试.png" alt class="small-icon" />
            <span>下次巡检日期</span>
          </div>
          <div>{{ info.checknext || '无' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LabelValueRow from "./LabelValueRow";
import CircleItem from "./CircleItem";
import LabelProgress from "./LabelProgress";
import echarts from "echarts";
export default {
  components: {
    LabelValueRow,
    CircleItem,
    LabelProgress
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      echarts: null
    };
  },
  mounted() {
    this.echarts = echarts.init(document.getElementById("echarts-2-3"));
    this.setOption();
  },
  methods: {
    setOption() {
      const other = (this.info.checknums || 0) - (this.info.checkoks || 0);
      let text = "0%";
      if (this.info.checknums !== 0 && this.info.checknums) {
        text = (this.info.checkoks / this.info.checknums) * 100;
        text = text.toFixed(2) + "%";
      }
      let data = [
        {
          value: this.info.checkoks || 0,
          name: "合格项",
          itemStyle: {
            color: "#308AE7"
          }
        },
        {
          value: other,
          name: "不合格项",
          itemStyle: {
            color: "#D6E8FA"
          }
        }
      ];
      if (!this.info.checknums) {
        data = [
          {
            value: other,
            name: "不合格项",
            itemStyle: {
              color: "#D6E8FA"
            }
          }
        ];
      }
      const option = {
        title: {
          text: text,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#0580f2",
            fontSize: "16"
          }
        },
        tooltip: {
          show: false,
          trigger: "none",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          }
        ]
      };
      this.echarts.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.try-project {
  display: flex;
  flex-direction: column;
  .content {
    display: flex;
    flex-direction: column;
  }
  .label-value-row {
    padding: 6px 10px 16px;
  }
  .echarts {
    margin-bottom: 10px;
    height: auto;
    #echarts-2-3 {
      width: 100px;
      height: 100px;
      margin: 0 auto;
    }
  }
  .remain {
    padding: 0 10px;
    background: #fafbfc;
    border-top: 1px solid rgba(230, 234, 238, 1);
    margin-top: 10px;
    height: 90px;
    display: flex;
    align-items: center;
    .label-progress:first-child {
      margin-bottom: 10px;
    }
    & > div {
      width: 100%;
    }
  }
}
</style>
